<template>
  <div class="contentTopLeftCont">
    <div class="contentTopLeftContTop">
      <ul>
        <li>
          <div>
            <b class="allDisCenter">{{obj.staff}}/{{obj.allStaff}}</b>
            <span class="allDisCenter">
              <i class="iconfont icon-renyuan greenColor" />员工人数
            </span>
          </div>
        </li>
        <li>
          <div>
            <b class="allDisCenter">{{obj.runningEquip}}/{{obj.allEquip}}</b>
            <span class="allDisCenter">
              <i class="iconfont icon-091-cogwheels redColor" />设备运行
            </span>
          </div>
        </li>
        <li>
          <div>
            <b class="allDisCenter">{{obj.finishOrder}}/{{obj.allOrder}}</b>
            <span class="allDisCenter">
              <i class="iconfont icon-zaizhidingdan yellowColor" />订单数量
            </span>
          </div>
        </li>
      </ul>
    </div>
    <div class="contentTopLeftContBottom">
      <ul>
        <li>
          <div>
            <b class="allDisCenter">{{obj.allDemand}}</b>
            <span class="allDisCenter">总需求数</span>
          </div>
        </li>
        <li>
          <div>
            <b class="allDisCenter">{{obj.allPlan}}</b>
            <span class="allDisCenter">总计划数</span>
          </div>
        </li>
        <li>
          <div>
            <b class="allDisCenter">{{obj.allOutNum}}</b>
            <span class="allDisCenter">总出库数</span>
          </div>
        </li>
        <li>
          <div>
            <b class="allDisCenter">{{obj.nowDemand}}</b>
            <span class="allDisCenter">当日需求数</span>
          </div>
        </li>
        <li>
          <div>
            <b class="allDisCenter">{{obj.nowPlan}}</b>
            <span class="allDisCenter">当日计划数</span>
          </div>
        </li>
        <li>
          <div>
            <b class="allDisCenter">{{obj.outNum}}</b>
            <span class="allDisCenter">当日出库数</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      obj: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    async getFactorySurvey() {
      const res = await this.$axios.get('/board/pro/monitor/factorySurvey')
      if (res?.data.code === 200) {
        this.obj = res.data.data
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.contentTopLeftCont {
  height: calc(100% - 45px);
  .contentTopLeftContTop {
    height: 25%;
    ul {
      height: 100%;
      li {
        width: 33.3333%;
        height: 100%;
        float: left;
        div {
          height: 100%;
          background: url(../../../../assets/images/sckb/kuan.png) no-repeat;
          background-size: 100% 100%;
          color: #fff;
          padding: 10px;
          b {
            width: 100%;
            // display: block;
            height: 60%;
            font-size: 24px;
          }
          span {
            i {
              font-size: 20px;
              margin-right: 5px;
            }
          }
        }
      }
      li:first-child {
        div {
          // padding-left: ;
        }
      }
    }
  }
  .contentTopLeftContBottom {
    height: 75%;
    ul {
      height: 100%;
      padding: 10px 0;
      li {
        height: 50%;
        width: 33.3333%;
        float: left;
        div {
          height: 100%;
          color: #fff;
          background: url(../../../../assets/images/sckb/di.png) no-repeat
            center bottom;
          background-size: 70% 70%;
          padding: 10px;
          b {
            width: 100%;
            height: 20%;
            font-size: 24px;
          }
          span {
            padding-top: 8px;
            color: #fefefe;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
